<template>
  <div class="common-container">
    <div class="header">
      <div class="header_left">

        <el-input v-model="searchForm.imei" clearable @clear="clearImei" placeholder="请输入设备编码" size="small"
          style="width: 220px;margin-right: 15px;" maxlength="50" oninput="value=value.replace(/[\u4e00-\u9fa5]/g,'')">
          <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick">
          </el-button>
        </el-input>

        <el-popover placement="bottom" width="460" trigger="click" popper-class="popover" size="small"
          v-model="showPopover">
          <div>
            <el-form label-width="70px" style="margin: 20px 0" class="popover_from">
              <el-form-item size="small" label="手机号">
                <el-input size="small" style="width: 360px;margin-left: 15px" clearable
                  oninput="value=value.replace(/[^\d]/g,'')" @blur="searchForm.phone = $event.target.value"
                  v-model="searchForm.phone" placeholder="请输入手机号" maxlength="11"></el-input>
              </el-form-item>
              <el-form-item size="small" label="发送结果">
                <el-select size="small" v-model="searchForm.result" style="width: 360px;margin-left: 15px"
                  placeholder="成功/失败" clearable>
                  <el-option v-for="item in statusList" :key="item.id" :label="item.type" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item size="small" label="日期筛选">
                <el-date-picker v-model.trim="timeArr" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']"
                  :picker-options="pickerOptions" style="width: 360px;margin-left: 15px" size="small">
                </el-date-picker>
              </el-form-item>
            </el-form>
            <div class="footer" style="text-align: right">
              <el-button size="small" @click="resetClick" class="cancel-button">重 置</el-button>
              <el-button size="small" @click="onSearch" class="confirm-button">确 定</el-button>
            </div>
          </div>
          <el-button size="small" slot="reference" :class="hasSearch ? 'elhasSearch elhasSearch2' : 'elhasSearch2'">
            高级搜索<i class="el-icon-search" style="margin-left: 5px; font-size: 12px"></i></el-button>
        </el-popover>

      </div>
    </div>
    <div class="content">
      <el-table :data="tableData" height="calc(100% - 65px)" class="table" :header-cell-style="headerStyle">
        <el-table-column label="序号" type="index" width="50" align="center" v-loading="loadingTable"
          element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(47, 51, 73, 0.3)">
        </el-table-column>
        <el-table-column prop="phone" label="手机号" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="orgName" label="联网单位" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="imei" label="设备编码" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="result" label="结果" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.result == 1" type="success">成功</el-tag>
            <el-tag v-else-if="scope.row.result == 0" type="danger">失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="errmsg" label="描述" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="code" label="状态码" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="sms" label="短信" align="center" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" show-overflow-tooltip min-width="100">
        </el-table-column>
      </el-table>
      <pagination :page.sync="page" :limit.sync="limit" :total="total" @pagination="PageSmsLog" class="pagination">
      </pagination>
    </div>
  </div>
</template>

<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { reqPageSmsLog } from "@/api/api";
import { mapState } from "vuex";

export default {
  name: "smsLog",
  components: {
    Pagination,
  },
  mixins: [tableStyleMixin],
  data() {
    return {
      //实现时间限制选择在一个月内而且不能超过当前时间
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.cuttentTime = minDate.getTime();
          if (maxDate) {
            this.cuttentTime = "";
          }
        },
        disabledDate: (time) => {
          //获取当前时间戳
          let myDate = new Date();
          let newY = myDate.getFullYear();
          let newM = myDate.getMonth() + 1;
          let newD = myDate.getDate();
          let oldTime =
            newY +
            "-" +
            (newM < 10 ? "0" + newM : newM) +
            "-" +
            (newD < 10 ? "0" + newD : newD) +
            " " +
            "23:59:59";
          // let oldTime="2022-7-5 23:59:59"
          oldTime = new Date(oldTime).getTime(); // 将中国时间转换成毫秒
          // 今天之后的时间不可选
          if (time.getTime() > oldTime) {
            //time.getTime() > Date.now()
            return true;
          }
          //选择日期范围为一个月
          if (this.cuttentTime != "") {
            const one = 30 * 24 * 3600 * 1000;
            const minTime = this.cuttentTime - one;
            const maxTime = this.cuttentTime + one;
            return time.getTime() < minTime || time.getTime() > maxTime;
          }
        },
      },
      search_val: "",
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],
      loadingTable: false,
      searchForm: {
        phone: "",
        imei: "",
        result: "",
      },
      // 成功失败
      statusList: [
        { id: 1, type: "成功" },
        { id: 0, type: "失败" },
      ],
      projectList: [],
      timeArr: [],
      loadingSearch: false,
      showPopover: false,
      hasSearch: false,
    };
  },
  watch: {
    // 时间控件清空
    // 'timeArr'(e){
    //   if(e==null){
    //       this.clearDeviceStatus()
    //   }
    // }
  },
  computed: {
    ...mapState(["user"]),
  },
  methods: {
    // 搜索
    async onSearch() {
      this.page = 1;
      this.limit = 10;
      this.showPopover = false;
      this.PageSmsLog()
    },
    // 高级搜索重置
    async resetClick() {
      this.searchForm.phone = ''
      this.searchForm.result = ''
      this.timeArr = []
      this.page = 1;
      this.limit = 10;
      await this.PageSmsLog()
    },
    clearImei() {
      this.PageSmsLog();
    },
    //查询
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.PageSmsLog();
      this.loadingSearch = false;
    },
    async PageSmsLog() {
      if (this.timeArr == null) {
        this.timeArr = "";
      }
      this.loadingTable = true;
      let res = await reqPageSmsLog(this.page, this.limit, {
        orgId: "",
        phone: this.searchForm.phone,
        imei: this.searchForm.imei,
        result: this.searchForm.result,
        startTime: this.timeArr[0],
        endTime: this.timeArr[1],
      });
      this.loadingTable = false;
      // console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.hasSearch = (this.searchForm.phone || this.searchForm.result || this.timeArr[0] || this.timeArr[1]) ? true : false
      this.tableData = res.data.rows;
      this.total = res.data.total;
    },
  },
  created() {
    this.PageSmsLog();
  },
  mounted() { },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");

// 查询按钮
::v-deep .el-button--small {
  background: #7367f0;
  color: #fff;
  border: none;

  // &:hover {
  //   box-shadow: 0px 0px 16px 0px ~"rgb(115 103 240 / 50%)";
  //   transition: box-shadow .3s;
  // }
}

// 日期控件颜色
::v-deep .el-range-editor .el-range-input {
  background: @primaryHeaderBgcolor !important;
  color: @primaryContentTxt;
}

//  日期控件对齐
.el-range-editor.el-input__inner {
  padding: 2px 10px !important;
}

// 高级搜索
::v-deep .el-button--primary {
  background-color: #7367f0;
  border: 1px solid #7367f0;
  color: #fff;
}

::v-deep .el-form-item__label {
  color: @primaryThemeTxtColor2;
  padding: 0px;
}

::v-deep .el-input__inner {
  color: var(--primaryContentTxt, #f1f1f1) !important;
}

.dropdown {
  background: #7367f0;
  color: #fff;
  border: none;
}

::v-deep .el-button--small {
  border: none;
}

// 高级搜索----------</style>